
<template>
<div class="main">
  <div>{{all_myrest_QueryKnowledgeGroup==null?'':''}}</div>
  <div>{{all_myrest_buyOrderNo_CreateKnowledgeGroupOrder==null?'':''}}</div>
  <div class="courseListWrap">
      <div class="cnt_left">
          <div class="grade_item chujiNav active" v-on:click="gradeNavClick($event)">初级课程</div>
          <div class="grade_item zhongjiNav" v-on:click="gradeNavClick($event)">中级课程</div>
          <div class="grade_item gaojiNav" v-on:click="gradeNavClick($event)">高级课程</div>
      </div>
      <div class="cnt_right">
          <div class="tag1">
              <div class="courseLevel_info">共<span>{{chujiList.length}}</span>套</div>
              <div class="courseLevel chuji">
                  <ul class="active" >
                      <li v-bind:id="'liListId_'+chujiitem.id" v-bind:class="'liListClass_'+chujiitem.id" v-for="chujiitem in chujiList">
                          <div class="imgbox">
                              <router-link :to="{path:'/WendaPreview'+ '/'+chujiitem.id }">
                                  <img v-bind:src="chujiitem.cover">
                              </router-link>
                          </div>
                          <div class="cntbox">
                              <router-link :to="{path:'/WendaPreview'+ '/'+chujiitem.id }">
                                  <h3>{{chujiitem.title}}</h3>
                                  <div class="cnt">{{chujiitem.intro}}</div>
                                  <div class="price">{{chujiitem.price/100}}</div>
                              </router-link>
                          </div>
                          <div class="choice">
                              <div class="choicebtn " v-on:click="liaddremove2($event)"></div>
                          </div>
                      </li>
                  </ul>
              </div>
              <!--中级课程-->
              <div class="courseLevel zhongji">
                  <ul>
                      <li v-bind:id="'liListId_'+zhongjiitem.id" v-bind:class="'liListClass_'+zhongjiitem.id" v-for="zhongjiitem in zhongjiList">
                          <div class="imgbox">
                              <a href="preview.html?groupId=2e754d389e0948b99c5018e7d9108e63">
                                  <img v-bind:src="zhongjiitem.cover">
                              </a>
                          </div>
                          <div class="cntbox">
                              <a href="preview.html?groupId=2e754d389e0948b99c5018e7d9108e63">
                                  <h3>{{zhongjiitem.title}}</h3>
                                  <div class="cnt">{{zhongjiitem.intro}}</div>
                                  <div class="price">{{zhongjiitem.price/100}}</div>
                              </a>
                          </div>
                          <div class="choice">
                              <div class="choicebtn " v-on:click="liaddremove2($event)"></div>
                          </div>
                      </li>
                  </ul>
              </div>
              <!--高级课程-->
              <div class="courseLevel gaoji">
                  <ul>
                      <li v-bind:id="'liListId_'+gaojiitem.id" v-bind:class="'liListClass_'+gaojiitem.id" v-for="gaojiitem in gaojiList">
                          <div class="imgbox">
                              <a href="preview.html?groupId=2e754d389e0948b99c5018e7d9108e63">
                                  <img v-bind:src="gaojiitem.cover">
                              </a>
                          </div>
                          <div class="cntbox">
                              <a href="preview.html?groupId=2e754d389e0948b99c5018e7d9108e63">
                                  <h3>{{gaojiitem.title}}</h3>
                                  <div class="cnt">{{gaojiitem.intro}}</div>
                                  <div class="price">{{gaojiitem.price/100}}</div>
                              </a>
                          </div>
                          <div class="choice">
                              <div class="choicebtn " v-on:click="liaddremove2($event)"></div>
                          </div>
                      </li>

                  </ul>
              </div>
          </div>

      </div>
  </div>

  <div class="modal"></div>
  <!--购物车详情-->
  <div class="cartList">
      <div class="cartListTit"><span>课程购物车</span></div>
      <ul class="cartListUl">
          <!--<li class="objIdName" id="cc">-->
              <!--<div class="imgbox"><img src="" /></div>-->
              <!--<div class="cntbox">-->
                  <!--<h3>这是大标题</h3>-->
                  <!--<div class="cnt">这是小标题</div>-->
                  <!--<div class="price">￥5元</div>-->
              <!--</div>-->
              <!--<div class="cartchoice">-->
                  <!--<div class="cartdelbtn" onClick="haha(this)"></div>-->
              <!--</div>-->
          <!--</li>-->
          <li v-bind:class="liitems.liItemClass" v-bind:id="liitems.liItemId" v-for="liitems in liarr">
              <div class="imgbox"><img v-bind:src="liitems.liItemImg" /></div>
              <div class="cntbox">
                  <h3>{{liitems.liItemH3}}</h3>
                  <div class="cnt">{{liitems.liItemCnt}}</div>
                  <div class="price">￥{{liitems.liItemPrice}}元</div>
              </div>
              <div class="cartchoice">
                  <div class="cartdelbtn" v-on:click="cartlistRemove($event)"></div>
              </div>
          </li>
      </ul>
  </div>
  <!--底部结算-->
  <div class="footer">
      <div class="buy_info"><h3>￥<span class="totalprice">{{totalPrice}}</span></h3><span>共<span class="totalnum">0</span>套课程</span></div>
      <div class="buy_btn" v-bind:style="{backgroundColor:buybtncolor}" v-on:click="goBuyNow()">确定购买</div>
  </div>
  <!--购物车购物数量-->
  <div class="cartlogobox" v-on:click="cartlogo()">
    <!--../assets/images/buy_icon_cart0.png-->
      <div class="cartlogo"><img v-bind:src="buy_icon_cart==0?'http://m.lep365.com/images/buy_icon_cart0.png':'http://m.lep365.com/images/buy_icon_cart1.png'" /><div class="upnum">6</div></div>
  </div>

</div>
</template>
<script>
  import stores from './mystore.js'
  import Vue from 'vue';
  import { XButton, XInput,Group, Tab, TabItem } from 'vux'
  import { mapGetters,mapActions } from 'vuex'
  import sha1 from 'js-sha1'
 // import myIndex from '../components/test/index.vue'
//  import myIndex from '../components/agree/index.vue'

  export default {
      data(){
          return {
              userToken:'',
              userSecert:'',
              orderNo:'',
              totalPrice:'',
              cartListlength:0,
              liarr:[],
              chujiList:[],
              zhongjiList:[],
              gaojiList:[],
              knowledgeGroupIds:[],
              gradeIdChuji:'f85e6cbb3e32439f8598cacf6d80f1b8',
              gradeIdZhongji:'',
              gradeIdGaoji:'',
              knowledgeGroupList:[],
              buy_icon_cart:0,
              isCartLogoClick:false,
              buybtncolor:'#aaa',
              classifyId:'',
              mypayload:{
              },
              buypayload:{
              },

              QueryUserPayload:{
                  url:'baseapi',
                  actionName:"QueryUserInfo",
                  postData: {
                      //mobile:"18616717008",
                      //password:"112233",
                      //treeView:"true"
                }
              },
              mypayload:{
                  url:'baseapi',
                  actionName:"QueryKnowledgeGroup",
                  postData: {
                      "classifyId":"",
                      //"pageNo":1,CreateKnowledgeGroupOrder
                      //"pageSize":4
                  }
              },
              createGroupOrderPayload:{
                  key:'buyOrderNo',
                  url:'baseapi',
                  actionName:"CreateKnowledgeGroupOrder",
                  postData: {
                      "knowledgeGroupIds":[],
                  }
              },

          }
      },
      watch:{
          cartListlength(curVal,oldVal){
              //console.log("curVal:"+curVal+" oldVal:"+oldVal)
              if(this.cartListlength>0){
                  $(".cartList").css("height", this.cartListlength * 87 + 40 + "px")
                  this.buy_icon_cart=1;
              }else{
                  $(".cartList").css("height","0")
                  $(".modal").removeClass("cartListShow").fadeOut();
                  this.buy_icon_cart=0;
              }
              //$(".cartList").css("height",this.cartListlength*87+40+"px")
          },
          knowledgeGroupList(curVal,oldVal){
            let that=this
            for(var i=0;i<that.knowledgeGroupList.length;i++){
              if(that.knowledgeGroupList[i].gradeId=='f85e6cbb3e32439f8598cacf6d80f1b8' && that.knowledgeGroupList[i].classifyId==that.classifyId){
                that.chujiList.push(that.knowledgeGroupList[i]);
              }
            }
          },
          liarr(curVal,oldVal){
              //console.log("liarr:curVal::"+curVal+" liarr:oldVal::"+oldVal)
              var totalPrice=0;
              this.knowledgeGroupIds=[];
              for(var i=0;i<this.liarr.length;i++){
                  totalPrice=totalPrice+parseInt(this.liarr[i].liItemPrice)
                  var liItemClassArr=this.liarr[i].liItemClass.split("_")
                  this.knowledgeGroupIds.push(liItemClassArr[1]);
                  this.createGroupOrderPayload.postData.knowledgeGroupIds=this.knowledgeGroupIds;
              }
              this.totalPrice=totalPrice
              if(this.liarr.length>0){
                  this.buybtncolor='#f75000';
              }else{
                  this.buybtncolor='#aaa';
              }
          }
      },
      computed:{
          all_myrest_QueryUserInfo(){
              var dataval=this.$store.getters.all_restful_QueryUserInfo;
              console.log("dataval:::dataval：：："+dataval)
              if(dataval){
                  return dataval
              }else{
                  return null
              }
              //return dataval;
          },

          all_myrest_QueryKnowledgeGroup(){
              var dataval=this.$store.getters.all_restful_QueryKnowledgeGroup;
              //return dataval.body
              if(dataval){
                  this.knowledgeGroupList=dataval.body.knowledgeGroupList;
//                  for(var i=0;i<this.knowledgeGroupList.length;i++){
//                    if(this.knowledgeGroupList[i].gradeId=='f85e6cbb3e32439f8598cacf6d80f1b8'){
//                      this.chujiList.push(this.knowledgeGroupList[i]);
//                    }
//                  }
                  return dataval.body
              }else{
                  return null
              }
              //return dataval;
          },
          all_myrest_buyOrderNo_CreateKnowledgeGroupOrder(){
              var dataval=this.$store.getters.all_restful_buyOrderNo_CreateKnowledgeGroupOrder;
              if(dataval){
                this.orderNo=dataval.body.orderNo;
                this.totalPrice=dataval.body.totalPrice;
                //window.location.href='http://m.lep365.com/v2/zzpage.html?token='+this.userToken+'&secret='+this.userSecert+'&orderid='+this.orderNo+'&totalprice='+this.totalPrice
                this.$router.push('/Zzpage/'+this.orderNo+'/1234/'+this.totalPrice)
                return dataval.body
              }else{
                return null
              }
              //return dataval;
          },

          all_myrest(){
              return this.$store.getters.all_logindata
          },

      },
      created (){
          this.userToken=window.localStorage.getItem("ls-token")
          this.userSecert=window.localStorage.getItem("ls-secert")

          var classifyId=this.$route.params.classifyId;
          this.classifyId=this.mypayload.postData.classifyId=classifyId;
          this.cntReady();
          //console.log('hahahahhahahahah'+this.cntReady())
      },

      methods:{
          doesh (){
              this.$store.commit('restful_api',this.QueryUserPayload)
          },
          goBuyNow:function(){
            console.info('请求体:::'+this.createGroupOrderPayload.postData.knowledgeGroupIds)
            this.$store.commit('restful_api',this.createGroupOrderPayload)
          },
          gradeNavClick:function(e){
              var obj=e.currentTarget;
              if($(obj).hasClass("active")){

              }else{
                  $(obj).addClass("active").siblings().removeClass("active")
                  if($(obj).hasClass("chujiNav")){
                      $(".chuji ul").addClass("active")
                      $(".chuji").siblings().find("ul").removeClass("active")
                      $(".courseLevel_info span").text(this.chujiList.length)
                  }
                  if($(obj).hasClass("zhongjiNav")){
                      $(".zhongji ul").addClass("active")
                      $(".zhongji").siblings().find("ul").removeClass("active")
                      $(".courseLevel_info span").text(this.zhongjiList.length)
                  }
                  if($(obj).hasClass("gaojiNav")){
                      $(".gaoji ul").addClass("active")
                      $(".gaoji").siblings().find("ul").removeClass("active")
                      $(".courseLevel_info span").text(this.gaojiList.length)
                  }
              }

          },
          cartlogo:function(){
              var cartListlength=this.cartListlength=$(".cartListUl").children().length
             // console.log("cartListlength:"+this.cartListlength)
              if($(".modal").hasClass("cartListShow")){
                  $(".modal").removeClass("cartListShow").fadeOut();
                  $(".cartList").css("height","0")
              }else{
                  if(this.liarr.length>0){
                      $(".modal").addClass("cartListShow").fadeIn()
                      $(".cartList").css("height", this.cartListlength * 87 + 40 + "px")
                  }
              }
          },

          cartlistRemove:function(e){
              var obj=e.currentTarget;
              var removeliclass= $(obj).parents("li").attr("class");
              for(var n in this.liarr){
                  if(this.liarr[n].liItemClass==removeliclass){
                      this.liarr.splice(n,1)
                  }
                 // console.log(n+':'+this.liarr[n]+'  ')
              }
              this.cartListlength=this.cartListlength-1;
              $(".courseLevel").find("."+removeliclass).find(".choicebtn").removeClass("choiced")
          },

          liaddremove2:function(e){
              var obj=e.currentTarget;
              var liItemObj={
                  liItemClass:$(obj).parents("li").attr("class"),
                  liItemId:$(obj).parents("li").attr("id"),
                  liItemImg:$(obj).parents("li").find(".imgbox").find("img").attr("src"),
                  liItemH3:$(obj).parents("li").find(".cntbox").find("h3").text(),
                  liItemCnt:$(obj).parents("li").find(".cntbox").find(".cnt").text(),
                  liItemPrice:$(obj).parents("li").find(".cntbox").find(".price").text(),
              };
              //this.liarr.push(liItemObj)
              if($(obj).hasClass("choiced")){
                  $(obj).removeClass("choiced")
                  var removeliclass= $(obj).parents("li").attr("class");
                  for(var n in this.liarr){
                      if(this.liarr[n].liItemClass==removeliclass){
                          this.liarr.splice(n,1)
                      }
                  //  console.log(n+':'+this.liarr[n]+'  ')
                  }
                  if(this.liarr.length==0){
                    this.buy_icon_cart=0;
                  }
              }else{
                  $(obj).addClass("choiced");
                  this.liarr.push(liItemObj);
                  this.buy_icon_cart=1;
                  //this.cartListlength=this.liarr.length
                  for(var n in this.liarr){
                   // console.log(n+':'+this.liarr[n]+'  ')
                  }
              }
          },
          liaddremove:function(e){
              var obj=e.currentTarget;
              if($(obj).hasClass("choiced")){
                  $(obj).removeClass("choiced")
              }else{
                  $(obj).addClass("choiced");
                  var liClassName=$(obj).parents("li").attr("class")
                  var result='<li class="'+liClassName+'" id="cc">'
                              +'<div class="imgbox" style="width:64px;"><img class="dddd" src="http://tpzs.lep365.com/group1/M00/00/3D/rBDEWVlKZJaAUeB1AADMPvb_iXI459.png" /></div>'
                              +'<div class="cntbox">'
                              +'<h3>objTit</h3>'
                              +'<div class="cnt">objCnt</div>'
                              +'<div class="price">￥5元</div>'
                              +'</div>'
                              +'<div class="cartchoice">'
                              +'<div class="cartdelbtn" onClick="hhhaaa()"><img src="http://116.228.152.190:666/images/buy_icon_del.png" /> </div>'
                              +'</div>'
                              +'</li>'
                  $(".cartListUl").append(result)
                  $(".cartList .imgbox").css({"width":"64px","height":"64px","overflow":"hidden","position":"relative"})
                  $(".cartList .imgbox img").css("width","100%")
                  $(".cartList .price").css("color","red")
                  $(".cartList").css({"transition":"height 0.3s","-webkit-transition":"height 0.3s"})
                  $(".cartList li").css({"border-bottom":"1px solid #eee","display":"-webkit-box","padding":"10px 0","position":"relative"})
                  $(".cartList h3").css({"font-size":"14px"})
                  $(".cartList .cnt").css({"font-size":"12px","color":"#666"})
                  $(".cntbox").css({"-webkit-box-flex":"1","padding-left":"10px","padding-right":"70px"})
                  $(".cartList .cartchoice").css({"width":"27px","height":"27px","position":"absolute","right":"15px","top":"28px"})
                  $(".cartList .cartdelbtn").css({"width":"27px","height":"27px"})
                  $(".cartList .cartdelbtn img").css({"width":"100%","height":"100%"})
                  //alert($(".cartList .imgbox img").height())
              }
          },
          cntReady:function(){
              this.$store.commit('restful_api',this.mypayload)
          },


      },
      components: { XButton, Group, XInput, Tab, TabItem }

  }

</script>

<style scoped>
    *{ margin:0; padding:0;}
    html{ background-color:#fbfbfb;}
    body,html,main{ width:100%; font-size:12px;}
    div img{ width:100%;}

    .main{ width:100%; height:100%; position:relative;}

    /*** 顶部 header ***/
    .header_top{ background-color: #f5f5f5; border-bottom: 1px solid #e5e5e5; position: relative; padding: 15px 0;}
    .header_tit{ text-align: center; font-weight: bold; font-size: 18px; }
    .goback{ width: 20px; position: absolute; left: 20px; top:16px;}
    .goback img{ width: 13px;}
    .header_yigou{ position: absolute; right: 20px; top:16px; color: #828b93; font-size: 14px;}

    .header{ width:100%; box-sizing:border-box; -webkit-box-sizing:border-box;}
    .coursebox{ box-sizing:border-box; -webkit-box-sizing:border-box; display:box; display:-webkit-box; border-bottom:1px solid #eee;}
    .coursebox .course{ _width:33%; box-sizing:border-box; -webkit-box-sizing:border-box; text-align:center; padding:15px 0 15px 0; font-size:16px; color:#666; -webkit-box-flex:1;box-flex:1;}
    .coursebox .course:nth-child(3){ _width:34%; }
    .coursebox .course.active{ border-bottom:2px solid #ee955b; color:#3D3836;}

    .courseListWrap{ _display:box; _display:-webkit-box;}
    .cnt_left{ _width:75px; background-color:#f7f9fc; _padding-top: 25px; display:box; display:-webkit-box;}
    .grade_item{ text-align:center; background-color:#fff; border-bottom:1px solid #e4e4e4; padding:16px 0; -webkit-box-flex: 1;}
    .grade_item.active{ color:#f75000;}
    .cnt_right{ box-flex:1; -webkit-box-flex:1;}


    .courseLevel_info{ background-color:#f7f9fc; margin-left: 5px; box-sizing:border-box; -webkit-box-sizing:border-box; padding:2px 0 4px 10px; font-size:12px; color:#999999; position:relative;}
    .courseLevelTit span{ font-size:14px; margin-right:10px; color:#3D3836;}
    .arrow{ width:8px; height:6px; background:url(../assets/images/buy_icon_down.png) no-repeat center; background-size:contain; position:absolute; right:22px; top:13px;}
    .open .arrow{ width:8px; height:6px; background:url(../assets/images/buy_icon_up.png) no-repeat center; background-size:contain; position:absolute; right:22px; top:13px;}
    .courseLevel ul{ height:0; _background-color:#ddd; overflow:hidden; overflow-y:scroll; _display:none; box-sizing:border-box; -webkit-box-sizing:border-box; padding-left:12px;}
    .courseLevel ul.active{ height: auto; padding-bottom: 90px; }
    .courseLevel ul{ transition:height 0.3s; -webkit-transition:height 0.3s;}
    .courseLevel ul li{ border-bottom:1px solid #eee; display:box; display:-webkit-box; padding:10px 0 10px 0; position:relative;}
    .courseLevel h3{ font-size: 14px;}
    .imgbox{ width:64px; height:64px; box-flex:1; }
    .imgbox img{ width:100%; height:100%;}
    .cntbox{ box-flex:1; -webkit-box-flex:1; padding-left:10px; padding-right:70px;}
    .cntbox a{ color:#3D3836;}
    .cntbox .cnt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#666; line-height:23px;}
    .cntbox .price{ color:red;}
    .choice{ width:27px; height:27px; position:absolute; right:15px; top:28px;}
    .choice .choicebtn{ display:block; width:27px; height:27px; background:url(../assets/images/buy_icon_addto.png) no-repeat center; background-size:contain;}
    .choice .choicebtn.choiced{ width:27px; height:27px; background:url(../assets/images/buy_icon_choice.png) no-repeat center; background-size:contain;}

    .choice .choicebtn.bought{ width:27px; height:27px; background:url(../assets/images/buy_icon_yigou.png) no-repeat center; background-size:contain;}

    .courseLevel ul{ transition:height 0.3s; -webkit-transition:height 0.3s;}

    .footer{ width:100%; height:45px; border-top:1px solid #ddd; position:fixed; bottom:53px; left:0; display:box; display:-webkit-box; background-color:#fff;}
    .footer .buy_info{ box-sizing:border-box; -webkit-box-sizing:border-box; box-flex:1; -webkit-box-flex:1; padding-left:18%;}
    .footer .buy_info h3{ font-size:20px; color:red; height:24px;}
    .footer .buy_info h3 span{ font-size:20px; color:red; height:24px;}
    .footer .buy_info span{ font-size:12px; color:#999;}
    .footer .buy_btn{ width:33%; box-sizing:border-box; -webkit-box-sizing:border-box; background-color:#b8b8b8; text-align:center; line-height:45px; color:#fff; font-size:16px;}

    .modal{ width:100%; height:100%; background:rgba(0,0,0,0.75); position:fixed; left:0; top:0; display:none;}

    .cartList{ width:100%; height:0px; overflow:hidden; position:fixed; left:0; bottom:96px; background-color:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; }
    .cartListTit{ width:100%; background-color:#f7f9fc; box-sizing:border-box; -webkit-box-sizing:border-box; padding:8px 10px; font-size:12px; color:#999999; border-bottom:1px solid #f1f1f1;}
    .cartListTit span{ font-size:14px; margin-right:10px; color:#3D3836;}
    .cartList ul{ height:100%; overflow:hidden; overflow-y:scroll; box-sizing:border-box; -webkit-box-sizing:border-box; padding-left:12px;}
    .cartList ul.active{ }
    .cartList ul li{ border-bottom:1px solid #eee; display:box; display:-webkit-box; padding:10px 0 10px 0; position:relative;}
    .cartList ul li h3{ font-size: 14px;}
    .cartList .imgbox{ width:64px; height:64px; box-flex:1; }
    ._cartList .imgbox img{ width:100%; height:100%;}
    .cartList .cntbox{ box-flex:1; -webkit-box-flex:1; padding-left:10px; padding-right:70px;}
    .cartList .cntbox .cnt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#666; line-height:23px;}
    .cartList .cntbox .price{ color:red;}
    .cartchoice{ width:27px; height:27px; position:absolute; right:15px; top:28px;}
    .cartchoice .cartdelbtn{ display:block; width:27px; height:27px; background:url(../assets/images/buy_icon_del.png) no-repeat center; background-size:contain;}

    .cartList{ transition:height 0.3s; -webkit-transition:height 0.3s;}

    .cartlogobox{ width:50px; height:50px; position:fixed; bottom:60px; left:10px; transition:height 0.3s; -webkit-transition:height 0.3s;}
    .cartlogo{ width:50px; height:50px; position:absolute; left:0px; top:0px;}
    .cartlogo img{ width:100%;}
    .upnum{ width:18px; height:18px; background-color:#ff9900; border-radius:20px; position:absolute; right:0; top:0; color:#fff; text-align:center; font-size:14px; display:none;}

    .tag2,.tag3,.tag4,.tag5,.tag6,.tag7{ display:none;}


    .testbtn{ position:fixed; left:10px; bottom:150px;}

  .tttt{ color: red;}
  </style>
